// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'



// 引入css文件
import "./index.css"

//组件通讯的三种方式
// 父组件 ->子组件
// 子组件->父组件 
// 兄弟组件

//子组件传递数据给父组件
//思路: 利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数

// 父组件提供一个回调函数 (用于接收数据)
// 将该函数作为属性的值 传递给子组件


class Parent extends React.Component {

  state = {
    lastName: ""
  }

  // 提供回调函数 传递给子组件
  getChildMsg = (msg) => {
    console.log(msg)
    this.setState({
      lastName: msg
    })
  }

  render() {
    const { lastName } = this.state
    return (
      <div>
        接收子组件的数据:
        <br />
        {lastName}
        <Bro1 getMeg={this.getChildMsg} lastName={this.state.lastName} />
        <Bro2 getMeg={this.getChildMsg} lastName={this.state.lastName} />
      </div>
    )
  }
}


class Bro1 extends React.Component {
  constructor(props) {
    super(props)
    console.log(props)
  }
  state = {
    data: 'child-bro1'
  }
  //子组件调用父组件的回调函数
  senMsgToParent = (e) => {
    this.props.getMeg(this.state.data)
  }

  render() {
    return (
      <div>
        <button onClick={this.senMsgToParent}>传递给父组件数据:</button>
      </div>
    )
  }
}



class Bro2 extends React.Component {
  constructor(props) {
    super(props)
    console.log(props)
  }
  state = {
    data: 'child-bro2'
  }
  //子组件调用父组件的回调函数
  senMsgToParent = (e) => {
    this.props.getMeg(this.state.data)
  }

  render() {
    return (
      <div>
        <button onClick={this.senMsgToParent}>传递给父组件数据:</button>
      </div>
    )
  }
}



//3 渲染react元素
ReactDOM.render(<Parent
  tag={<p>这是段落</p>}
  fn={() => console.log("这是一个函数")}
  colors={['red', 'blue', 'greens']}
  name='jack'
  age={12} />,
  document.getElementById('root'))
